<template>
	<view class="missriver"
		:style="{backgroundImage: 'url(' + bgimg2 + ')',background:showmisstop4 == true ? 'black' : ''}">
		<Missrivertop1 v-if='showmisstop1' class='top1' @misssubmit='misssubmit' @reput='reput'></Missrivertop1>
		<Missrivertop2 v-if='showmisstop2' class='top1' @misspass='misspass' @pass='pass'></Missrivertop2>
		<Missrivertop3 v-if='showmisstop3' class='top1' @ok='ok' @return='Return'></Missrivertop3>
		<Missrivertop4 v-if='showmisstop4' class='top1' @savecavas='savecavas' @pass='pass' @guo='guo'></Missrivertop4>
		<Missrivertop5 v-if='showmisstop5' ref="showmisstop5" class='top1' @reput='reput' @misspass3='misspass3'
			@blackto='blackto'></Missrivertop5>
		<Missrivertop6 v-if='showmisstop6' class='top1' @misspass3='misspass3' @returns='returns'></Missrivertop6>
		<!-- 	<image class="bgimg" :src="getImgUrl('/img/allImgs/missimg/beijing2.png')" mode="" v-if="showmisstop1 == true || showmisstop5 == true"></image>
		<image class="bgimg" :src="getImgUrl('/img/missimg/beijing.png')" mode="" v-else></image> -->
	</view>
</template>

<script>
	import Missrivertop1 from "./components/missrivertop1.vue"
	import Missrivertop2 from "./components/missrivertop2.vue"
	import Missrivertop3 from "./components/missrivertop3.vue"
	import Missrivertop4 from "./components/missrivertop4.vue"
	import Missrivertop5 from "./components/missrivertop5.vue"
	import Missrivertop6 from "./components/missrivertop6.vue"
	import {
		imgBaseUrl
	} from '../../../utils/baseUrl.js'
	// import bgimg from "@/static/home/dash.svg"
	export default {
		components: {
			Missrivertop1,
			Missrivertop2,
			Missrivertop3,
			Missrivertop4,
			Missrivertop5,
			Missrivertop6,
		},
		data() {
			return {
				bgimg: imgBaseUrl + "//img/missimg/beijing.png",
				bgimg2: imgBaseUrl + "//img/missimg/beijing.png",
				isbtn: false,
				showmisstop1: true,
				showmisstop2: false,
				showmisstop3: false,
				showmisstop4: false,
				showmisstop5: false,
				showmisstop6: false,
				screenHeight: 0
			}
		},
		onLoad() {
			console.log(this,'this');
			this.screenHeight = uni.getSystemInfoSync().windowHeight
		},
		methods: {
			misssubmit() {
				this.showmisstop1 = false;
				this.showmisstop2 = true;
			},
			misspass() {
				this.showmisstop2 = false;
				this.showmisstop3 = true;
				this.showmisstop6 = false;
			},
			misspass3() {
				this.showmisstop5 = false;
				this.showmisstop6 = false;
				this.showmisstop2 = true;
			},
			ok() {
				this.showmisstop3 = false;
				this.showmisstop4 = true;
			},
			savecavas() {
				this.showmisstop4 = false;
				this.showmisstop1 = true;
			},
			reput() {
				this.showmisstop1 = false;
				this.showmisstop5 = false;
				this.showmisstop6 = true;
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			pass() {
				this.showmisstop2 = false;
				this.showmisstop1 = true;
			},
			Return() {
				this.showmisstop3 = false;
				this.showmisstop2 = true;
			},
			guo() {
				this.showmisstop4 = false;
				this.showmisstop3 = true;
			},
			blackto() {
				this.showmisstop5 = false;
				this.showmisstop4 = true;
			},
			returns() {
				this.showmisstop6 = false;
				this.showmisstop1 = true;
			}
		},
		onUnload() {
		    this.$children[0].listData = []
			this.$children[0].Data()
			this.$children[0].colrdo()
		  }
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
	}

	.missriver {
		// width: 100%;
		// height: 100vh;
		// background-size: 100%;
		//       background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		min-height: 100%;
		background-repeat: no-repeat;

		.bgimg {
			background-repeat: no-repeat;
			background-size: cover;
			width: 100%;
			height: 100vh;
			filter: brightness(100%);
		}

		.top1 {
			width: 100%;
			// position: absolute;
			// top: 20rpx;
		}
	}
</style>